import { Link } from 'react-router-dom';

const styles = {
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '1rem 5%',
    background: 'rgba(255, 255, 255, 0.95)',
    backdropFilter: 'blur(10px)',
    borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.05)',
    position: 'sticky',
    top: 0,
    zIndex: 1000
  },
  title: {
    fontSize: '1.8rem',
    fontWeight: '700',
    background: 'linear-gradient(45deg, #4CAF50, #2E7D32)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    letterSpacing: '-0.5px'
  },
  navContainer: {
    display: 'flex',
    alignItems: 'center',
    gap: '2rem'
  },
  navLink: {
    color: '#2c3e50',
    textDecoration: 'none',
    fontWeight: '500',
    transition: 'all 0.3s ease',
    ':hover': {
      color: '#4CAF50',
      transform: 'translateY(-2px)'
    }
  },
  profile: {
    display: 'flex',
    alignItems: 'center',
    gap: '1rem'
  },
  avatar: {
    width: '45px',
    height: '45px',
    borderRadius: '50%',
    cursor: 'pointer',
    transition: 'all 0.3s ease',
    border: '2px solid #e0e0e0',
    ':hover': {
      transform: 'scale(1.1)',
      boxShadow: '0 4px 15px rgba(76, 175, 80, 0.3)',
      borderColor: '#4CAF50'
    }
  }
};

const Header = () => {
  return (
    <header style={styles.header}>
      <h1 style={styles.title}>DeepCheck</h1>
      
      <div style={styles.navContainer}>
        <nav style={{ display: 'flex', gap: '1.5rem' }}>
          <Link to="/" style={styles.navLink}>首页</Link>
          <Link to="/about" style={styles.navLink}>关于我们</Link>
          <Link to="/news" style={styles.navLink}>最新资讯</Link>
        </nav>

        <div style={styles.profile}>
          <Link to="/settings">
            <img 
              src="/avatar-placeholder.png" 
              alt="Profile" 
              style={styles.avatar}
            />
          </Link>
        </div>
      </div>
    </header>
  );
};

export default Header;